<template>
  <div class="table">
    <div class="commontop">
      <div class="commontop-left">
        <el-input
          placeholder="模板名称、ID"
          v-model="pages.keyword"
          @change="INput"
          @clear="INput"
          @keyup.enter.native="goSearch()"
          clearable
          prefix-icon="el-icon-search"
        ></el-input>
        <el-button
          class="searchbgc"
          @click="goSearch"
          icon="iconfont icon-sousuo2"
          >搜索</el-button
        >

        <el-button
          icon="iconfont icon-tianjia"
          @click="dialogVisible = true"
          v-show="xsyc === '1' ? true : false"
          >添加模板</el-button
        >
      </div>
      <div class="commontop-right">
        <el-button
          class="red"
          icon="iconfont icon-shanchu1"
          @click="deleteSelectItem()"
          v-show="xsyc === '1' ? true : false"
          >删除</el-button
        >
      </div>
    </div>
    <div class="content">
      <el-table
        v-loading="isLoading"
        ref="multipleSelection"
        @selection-change="handleSelectionChange"
        :data="tableData"
        :header-cell-style="{ backgroundColor: '#3963fd', color: '#fff' }"
        style="width: 100%; margin-top: 20px"
      >
        <template slot="empty">
          <img src="@/assets/imgs/暂未数据.png" alt style="margin-top: 104px" />
          <p style="margin-top: 15px; margin-bottom: 104px">暂未有数据</p>
        </template>
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="sort" label="序号" width="80"></el-table-column>
        <el-table-column prop="title" label="标题">
          <template slot-scope="scope">
            <a
              @click="goTemplate(scope.row)"
              style="color: blue; cursor: pointer"
              >{{ scope.row.title }}
            </a>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间"> </el-table-column>
        <el-table-column prop="creator" label="创建人"></el-table-column>
        <el-table-column label="操作" width="120px">
          <!--  v-if="scope.row.value1 == true ? true : false" -->
          <template slot-scope="scope">
            <el-button class="green" size="mini" @click="showEdit(scope.row.id)"
              ><i class="el-icon-edit"></i
            ></el-button>
            <el-button
              class="red"
              size="mini"
              @click.native.prevent="deleteRow(scope.row.id)"
              ><i class="el-icon-delete"></i
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current_page"
          :page-sizes="pageSizeArr"
          :page-size="pages.per_page"
          layout="total, sizes, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      class="tab"
      title="编辑"
      width="30%"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="editForm" ref="editForm">
        <el-form-item label="标题" prop="title">
          <el-input
            placeholder="请输入标题"
            v-model="editForm.title"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number
            v-model="editForm.sort"
            :min="0"
            :max="99"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
        <div class="login-btn">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="category('editForm')"
            >编辑完成</el-button
          >
        </div>
      </el-form>
    </el-dialog>
    <el-dialog
      class="tab"
      title="添加分类模板"
      :visible.sync="dialogVisible"
      width="35%"
    >
      <el-form ref="form" :rules="fileForm" :model="form" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" placeholder="请填写标题"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number
            v-model="form.sort"
            :min="0"
            :max="99"
            label="描述文字"
          ></el-input-number>
          <p class="tips">选填，排序越高越在前面</p>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="SubmitBtn('form')">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  classifyTemplates,
  classifies,
  AddclassifyTemplates,
  delclassRetrieveMore,
  delclassifyTemplates,
  seeclassifyTemplates,
  modifyclassifyTemplates,
  classifytemplates,
} from "../../api/Template/index";
import { users } from "../../api/recycle/index";
import commonInfo from "@/utils/common";
export default {
  data() {
    return {
      //按钮显示隐藏
      xsyc: "1",
      //table表格
      /* 页面 */
      pages: {
        per_page: 10,
        page: 1,
        keyword: "",
      },
      //表格页面
      pageSizeArr: JSON.parse(JSON.stringify(commonInfo.pageSizeArr)),
      current_page: 1,
      total: 0,
      isLoading: true,
      /* 表格数据 */
      tableData: [],
      //添加分类
      fileForm: {
        title: [
          {
            required: true,
            message: "请输入标题",
            trigger: "blur",
          },
        ],
      },
      /* 添加分类表单 */
      form: {
        title: "",
        sort: "",
        /*  classification: "", */
      },
      /* 添加分类蒙尘 */
      dialogVisible: false,
      /* 数组 */
      multipleSelection: [],
      //编辑蒙尘
      dialogFormVisible: false,
      /* 编辑表单 */
      editForm: {
        title: "",
        id: "",
        sort: "",
      },
      formLabelWidth: "120px",
    };
  },
  methods: {
    /* 获取表格数据 */
    async loadData() {
      let res = await classifyTemplates();
      /*   let res2 = await users();
      console.log(res, "11");
      console.log(res2, "22"); */
      if (res.data.code == 200) {
        this.tableData = res.data.data.data;
        this.total = res.data.data.total;
        this.current_page = res.data.data.current_page;
        this.isLoading = false;
      }
      /*  for (let item of this.tableData) {
        for (let item2 of res2.data.data.data) {
          if (item.creator_id == item2.id) {
            item.creator_id = item2.nickname;
          }
        }
      } */
      console.log(this.tableData);
    },
    INput() {
      if (this.pages.keyword == "") {
        this.loadData();
      }
    },
    //搜索
    async goSearch() {
      this.pages.page = 1;
      this.pages.per_page = 10;
      this.current_page = 1;
      console.log(this.pages);
      if (this.pages.keyword == "") {
        this.$message.warning("查询条件不能为空！");
        return;
      }
      let res = await classifyTemplates(this.pages);
      /*  let res2 = await users();
      console.log(res, "123");
      console.log(res2, "123"); */
      this.tableData = res.data.data;
      this.total = res.data.data.total;
      this.current_page = res.data.data.current_page;
      /* for (let item of this.tableData) {
        for (let item2 of res2.data.data.data) {
          if (item.creator_id == item2.id) {
            item.creator_id = item2.nickname;
          }
        }
      } */
    },
    //table表格
    //编辑
    async showEdit(id) {
      let res = await seeclassifyTemplates({ id });
      console.log(res);
      this.editForm.title = res.data.data.title;
      this.editForm.sort = res.data.data.sort;
      this.editForm.id = res.data.data.id;
      this.dialogFormVisible = true;
    },
    //编辑确认
    category(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await modifyclassifyTemplates(this.editForm);
          console.log(res);
          if (res.data.code == 200) {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "success",
            });
            this.dialogFormVisible = false;
            this.loadData();
          } else {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "error",
            });
          }
        }
      });
    },
    //删除
    deleteRow(id) {
      this.$confirm("确认删除？")
        .then(async (_) => {
          let res = await delclassifyTemplates({ id });
          console.log(res);
          if (res.data.code === 200) {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "success",
            });
            this.loadData();
          } else {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "error",
            });
          }
        })
        .catch((_) => {
          this.$message({
            showClose: true,
            duration: 3000,
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //分页
    handleCurrentChange(val) {
      this.current_page = val;
      this.pages.page = val;
      this.loadData(this.pages);
    },
    //分页
    handleSizeChange(val) {
      this.pages.per_page = val;
      this.loadData(this.pages);
    },

    //跳转到模板
    goTemplate(row) {
      this.$router.push({
        path: "/project/project-class/template",
        query: {
          id: row.id,
        },
      });
    },
    //多选删除
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //多选删除
    deleteSelectItem() {
      //console.log(this.multipleSelection);
      if (this.multipleSelection.length == 0) {
        this.$message({
          showClose: true,
          duration: 3000,

          message: "请先选中要删除的成员哦！ 亲",
          type: "error",
        });
      } else {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          let arr = this.multipleSelection.map((item) => item.id);
          let ids = arr.join(",");
          let res = await delclassRetrieveMore({ ids });
          if (res.data.code === 200) {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "success",
            });
            this.loadData();
          } else {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "error",
            });
          }
        });
      }
    },
    /* 添加分类模板确定 */
    SubmitBtn(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await AddclassifyTemplates(this.form);
          //console.log(res);
          if (res.data.code === 200) {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "success",
            });
            this.$refs[formName].resetFields();
            this.loadData(this.pages);
          } else {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "error",
            });
          }
          this.dialogVisible = false;
        }
      });
    },
  },
  created() {
    this.loadData();
  },
};
</script>

<style scoped lang="less">
.table {
  /deep/.el-table__header {
    margin-bottom: 20px;
  }
  /deep/.el-table {
    background-color: #f3f5fb;
  }
  /deep/.el-table .cell {
    display: flex;
  }
  /deep/.el-button--mini {
    font-size: 18px !important;
  }
  .el-button--mini {
    padding: 7px 5px;
  }
}
.login-btn {
  display: flex;
  justify-content: space-around;
}
</style>
